import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {adminchildren,userchildren} from "../../router"
import {Outlet,NavLink,useLocation,Link} from "react-router-dom"
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const breadcrumbNameMap = {  // 路由和面包屑的映射关系
    '/home': 'home',
    '/home/list': '列表',
    '/home/result': '结果',
    '/home/detail': '详情',
    'home/result/resultson':"结果子页"
  };
  let children = window.localStorage.getItem("user")==="admin" ? adminchildren :userchildren
  function filterRouter (homeChildren) {
    const data = []
    homeChildren.forEach((item,index)=>{
      data.push({
        key:Math.random(),
        icon:<TeamOutlined></TeamOutlined>,
        label:<NavLink to={item.path}>{item.tit}</NavLink>,
        children:item.children ? filterRouter(item.children) : ""
      })
    })
    return data
  }
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter((i) => i);
  console.log(pathSnippets,"pathSnippets");
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={filterRouter(children)} />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
             {extraBreadcrumbItems}
          </Breadcrumb>
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
          <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;